<template>
  <el-dialog
    v-el-drag-dialog
    title="新增通知"
    :visible.sync="visible"
    top="50px"
    width="1024px"
    @closed="reset"
  >
    <el-form ref="dataForm" class="form" :rules="rules" :model="temp" label-position="right" label-width="100px">
      <el-form-item label="标题:" prop="title">
        <el-input v-model="temp.title" :maxlength="128" clearable />
      </el-form-item>
      <el-form-item label="紧急程度:" prop="noticeDegree">
        <el-select v-model="temp.noticeDegree" filterable clearable placeholder="请选择">
          <el-option
            v-for="item in noticeDegreeMap"
            :key="item.value"
            :label="item.desc"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="内容:" prop="noticeContent" class="block">
        <fu-ck-editor v-model="temp.noticeContent" />
      </el-form-item>
      <el-form-item label="送达部门:" prop="targetOrgId" class="block">
        <el-tree-select
          v-model="temp.targetOrgId"
          :clearable="false"
          class="tree-select"
          :popover-width="360"
          :select-params="{
            clearable: true,
            placeholder: '请选择',
            loading: $loadingPlugin.getTreeData
          }"
          :tree-params=" {
            'default-expand-all': true,
            'expand-on-click-node': false,
            'highlight-current': true,
            props:{
              value:'orgId',
              label: 'orgName',
              disabled: 'disabled',
            },
            data: treeData
          }"
          @node-click="selectTreeChange"
        />
      </el-form-item>
      <el-form-item label="子部门类型:" prop="targetOrgType">
        <el-select v-model="temp.targetOrgType" :loading="$loadingPlugin.getSubPartment" style="width: 100%;" placeholder="请选择">
          <el-option
            v-for="(value, key) in subPartmentList"
            :key="key"
            :label="value"
            :value="key"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="接收者:" prop="receiverId">
        <el-select v-model="temp.receiverId" :loading="$loadingPlugin.getOwnersList" style="width: 100%;" placeholder="请选择">
          <el-option
            v-for="item in ownersList"
            :key="item.userId"
            :label="item.userName"
            :value="item.userId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="发出部门:" prop="fromOrgName">
        <el-input v-model="fromOrgName" disabled />
      </el-form-item>
      <el-form-item label="发送人:" prop="sendName">
        <el-input v-model="sendName" disabled />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">
        关闭
      </el-button>
      <el-button :loading="$loadingPlugin.submit" type="primary" @click="success">
        确认发布
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { queryOrgSubPartment, queryOwnerList, saveAddNotice } from '@/api'
  import FuCkEditor from '@/components/FuCkEditor/index'
  import { mapGetters } from 'vuex'
  import getTreeData from '@/utils/jsonTree'

  export default {
    name: 'add',
    components: {
      FuCkEditor
    },
    props: {
      noticeDegreeMap: {
        type: Array,
        required: true
      }
    },
    data() {
      return {
        visible: false,
        treeData: [],
        currentOrg: null,
        subPartmentList: {},
        ownersList: [],
        temp: {
          title: '',
          noticeDegree: 1,
          noticeContent: '',
          targetOrgId: '',
          targetOrgType: '',
          receiverId: ''
        },
        rules: {
          title: [{ required: true, message: '请输入标题', trigger: 'change' }],
          noticeDegree: [{ required: true, message: '请选择紧急程度', trigger: 'change' }],
          targetOrgId: [{ required: true, message: '请选择送达部门', trigger: 'change' }]
        }
      }
    },
    computed: {
      ...mapGetters([
        'orgList', 'userInfo', 'corpSettingData'
      ]),
      fromOrgName: function() {
        return this.userInfo.orgName
      },
      sendName: function() {
        return this.userInfo.userName
      }
    },
    async created() {
      await this.getTreeData()
    },
    methods: {
      open() {
        return new Promise(resolve => {
          this.resolve = resolve
          this.visible = true
        })
      },
      // 获取所属机构数据
      async getTreeData() {
        const data = this.orgList.map(item => ({
          label: item.orgName,
          ...item
        }))
        this.treeData = getTreeData(data)
      },
      // 选择所属机构
      selectTreeChange(value) {
        this.$set(this.temp, 'fromOrgId', value.orgId)
        this.currentOrg = value
        this.getSubPartment(value.orgId)
        this.getOwnersList(value.orgId)
      },
      async getSubPartment(orgId) {
        const res = await queryOrgSubPartment({
          orgId
        })
        this.subPartmentList = res.data
      },
      // 查询接收人列表
      async getOwnersList(orgId) {
        const b = this.corpSettingData.sp1 >> 2 & 0x01
        const res = await queryOwnerList({
          orgId,
          corpparm1: b
        })
        this.ownersList = res.data
      },
      success() {
        this.$refs.dataForm.validate(valid => {
          if (!valid) return
          const params = {
            title: this.temp.title,
            noticeDegree: this.temp.noticeDegree,
            noticeContent: this.temp.noticeContent,
            targetOrgType: this.temp.targetOrgType
          }
          params.fromOrgId = this.userInfo.orgId
          params.fromOrgSNNo = this.userInfo.orgSNNo
          params.fromOrgName = this.userInfo.orgName
          if (this.temp.targetOrgId) {
            const org = this.orgList.find(item => item.orgId === this.temp.targetOrgId)
            params.targetOrgId = this.temp.targetOrgId
            params.targetOrgSNNo = org.orgSNNo
            params.targetOrgName = org.orgName
          }
          if (this.temp.receiverId) {
            const user = this.ownersList.find(item => item.userId === this.temp.receiverId)
            params.receiverId = user.userId
            params.receiver = user.userName
          }
          if (params.targetOrgId === this.userInfo.orgId) {
            this.$message.error('相同部门之间不可以发送通知')
            return
          }
          this.$confirm('确认保存通知公告信息？', '提示', {
            type: 'info'
          }).then(() => {
            this.submit(params)
          })
        })
      },
      async submit(params) {
        await saveAddNotice(params)
        this.resolve()
        this.visible = false
        this.$notify({
          title: '提示',
          message: '发布成功',
          type: 'success',
          duration: 2000
        })
      },
      reset() {
        this.temp = {
          title: '',
          noticeDegree: 1,
          noticeContent: '',
          targetOrgId: '',
          targetOrgType: '',
          receiverId: ''
        }
        this.$nextTick(() => {
          this.$refs.dataForm.clearValidate()
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
.form {
  display: flex;
  flex-wrap: wrap;
  & /deep/ .el-form-item {
    width: 50%;
    padding-right: 10px;
    .el-form-item__content > .el-select {
      width: 100%;
    }
  }
  .block {
    width: 100%;
  }
  /deep/ .ckeditor .ck.ck-content {
    min-height: 500px;
  }
}
.info-title {
  display: flex;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 20px;
  .title-icon {
    display: inline-block;
    width: 4px;
    height: 18px;
    margin-right: 6px;
    background: $themeColor;
  }
  span {
    font-weight: 700;
    color: $themeColor;
  }
}
</style>
